<template>
    <div style="height: 300px;text-align: left;">
<!--        num1:{{num1}} num2:{{num2}}-->
        <v-chart :option="option" :autoresize="true"/>
    </div>
</template>

<script>
    import lodash from 'lodash'
    export default {
        name: "fenshu-chart",
        props: {
            num1: {
            },
            num2: {
            },
        },
        data() {
            return {
                option: {},
                OPTION_TEMPLATE: {
                    title: {
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    // legend: {
                    //     orient: 'vertical',
                    //     left: 'left',
                    // },
                    series: [
                        {
                            // name: '学生',
                            type: 'pie',
                            radius: '70%',
                            data: [

                            ],
                            // emphasis: {
                            //     itemStyle: {
                            //         shadowBlur: 10,
                            //         shadowOffsetX: 0,
                            //         shadowColor: 'rgba(0, 0, 0, 0.5)'
                            //     }
                            // }
                        }
                    ]
                },
            }
        },
        methods: {
            refreshData() {
                let option = lodash.cloneDeep(this.OPTION_TEMPLATE)
                let arr = []
                for (let i = 0; i < parseInt(this.num2); i++) {
                    if (i < parseInt(this.num1)) {
                        arr.push({name: i + 1, value: 1 / this.num2})
                    } else {
                        arr.push({name: i + 1, value: 1 / this.num2, itemStyle: {color: 'gray'}})
                    }
                }
                option.series[0].data = arr
                this.option = option
            }
        },
        computed: {
            paramObj() {
                return {
                    num1: this.num1,
                    num2: this.num2,
                }
            }
        },
        watch: {
            paramObj: {
                immediate: true,
                deep: true,
                handler() {
                    this.refreshData()
                }
            },
        },
        mounted() {
        }
    }
</script>

<style scoped>

</style>
